<template>
  <div class="w-full h-full">
    <!-- 用户信息 -->
    <div class="w-full flex flex-col items-center bg-blue">
      <!-- 图片 -->
      <div class=" w-36 h-36 p-2 bg-[#221f2aff] rounded-full">
        <img class="w-full h-full rounded-full" src="https://img1.baidu.com/it/u=2526782352,137544254&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1697389200&t=48c26e78e138e88cfc418b17f1960bda" alt="">
      </div>
      <div class="flex items-center my-2">
        <span class=" text-xl  leading-loose ml-6">UserName</span>
        <i  class="iconfont icon-edit w-8 h-8 flex items-center justify-center bg-[#221f2aff] rounded-md ml-2 cursor-pointer hover:bg-[#ff4757]" ></i>
      </div>
    </div>
    <div class="w-full h-auto  flex">
      <div class="w-auto h-auto px-2 mr-2 flex flex-col gap-1">
        <RouterLink :to="item.path"  class="text-sm bg-black/50 text-white/80 px-3 py-2 rounded-lg cursor-pointer hover:bg-[#f74757]" v-for="item in List" :key="item.path">{{ item.text }}</RouterLink>
      </div>
      <div class="flex-1">
        <RouterView class="w-full h-auto" ></RouterView>
      </div>
    </div>
  </div>
</template>

<script>
export default{
    data() {
        return {
            List: [
                {
                    path: '/user/my-album',
                    text: '我的歌单',
                },
                {
                    path: '/user/my-mv',
                    text: '我的MV',
                },
                {
                    path: '/user/my-artist',
                    text: '我的歌手',
                }
            ]
        };
    }
}
</script>